import React,{Component} from 'react'
import moment from 'moment';
import Pages from '../Pages'
import * as pub from '../../config/public'
import * as fetch from '../../config/fetch'
import { DatePicker,Spin,message} from 'antd';

class Detail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			detailList:this.props.detailList?this.props.detailList:[],
		}
	}
	 componentWillUpdate(nextProps) {
        if (nextProps.detailList !== this.props.detailList) {
            this.setState({
				detailList:nextProps.detailList
			})
        }
    }
	shouldComponentUpdate(nextProps, nextState) {
        return pub.shouldComponentUpdate(nextProps, nextState, this.props, this.state);
    }
	render(){
		return(
					<div className="integral-details bg-FFFFFF box-shadow">
						<table>
							<thead>
								<tr>
									<th>変动时间</th>
									<th>変动类型</th>
									<th>変动详情</th>
								</tr>
							</thead>
							<tbody>
							{this.state.detailList.map((item,index)=>{
								return(
									<tr key={index}>
									   <td>{pub.formatTimestamp(item.integralChangeTime?item.integralChangeTime:'')}</td>
									   <td>{item.integralChangeType==="0"?item.integralChangeType="获取":item.integralChangeType="消费"}</td>
									   <td>{item.integralChangeInfo?item.integralChangeInfo:''}</td>
								    </tr>
									)
							})}
							</tbody>
						</table>
					</div>
			)
	}
}
class PointDetail extends Component {
	constructor(props) {
		super(props);
		this.state = {
			detailList:[],
			jumpPage: 1,
			totalPage: 0 ,
			beginDate:moment(new Date(new Date()-1000*60*60*24*7), 'YYYY/MM/DD').format('YYYY/MM/DD'),
			endDate:moment(new Date(), 'YYYY/MM/DD').format('YYYY/MM/DD'),
			loading: false
		}
	}
	selectPointDetail(){
		if(!this.state.beginDate||!this.state.endDate){
			message.warning('请输入有效时间', 3);
			return;
		}
        pub.loading(this,true);
		let beginDate=this.state.beginDate,endDate=this.state.endDate;
		fetch.userLoglist({pageno:this.state.jumpPage,beginDate:beginDate,endDate:endDate}).then((data) => {
			if(data.result==='RC100'){
				this.setState({
					detailList:data.userLog?data.userLog:[],
					totalPage:data.totalPage?data.totalPage:0
				});
		   }else{
               message.error(data.errMsg, 3);
		   }
			pub.loading(this,false);
		},(res)=>{
			pub.loading(this,false);
			pub.reject(res);
		})
	}
    componentWillMount() {
		this.selectPointDetail();
	}
	jump(page) {
		this.setState({
			jumpPage:page
		},()=>{
			this.selectPointDetail();
		})
	}
	startChange(date, dateString) {
     this.setState({
		 beginDate:dateString
	 })
    }  
	endChange(date,dateString) {
      this.setState({
		  endDate:dateString,
	  })
	}
    PoDetClick(){
		this.selectPointDetail();
	}
	render(){
        const dateFormat = 'YYYY/MM/DD';
		return(
			<div>
				<div className="row">
					<div className="common-title">
						{/*<span>积分详情</span>*/}
						<div className="select">
							<label>积分变动：</label>
							{/*<input  id="start-time" className="form-date" placeholder="年/月/日"/>*/}
							<DatePicker onChange={this.startChange.bind(this)} format={dateFormat} defaultValue={moment(new Date(new Date()-1000*60*60*24*7), 'YYYY/MM/DD')} />
							<span className="line-1"></span>
							{/*<input type="date" id="end-time" className="form-date" placeholder="年/月/日"/>*/}
							<DatePicker onChange={this.endChange.bind(this)} format={dateFormat} defaultValue={moment(new Date(), 'YYYY/MM/DD')} />
							<a className="btn btn-blue" onClick={this.PoDetClick.bind(this)}>查询</a>
						</div>
					</div>
					
					{/*<div className="panel-120 bg-FFFFFF box-shadow" style={{top:'0px'}}>
						<div className="select">
							<label>积分变动：</label>
							<input type="date" id="start-time" className="form-date" placeholder="年/月/日"/>
							<span className="line-1"></span>
							<input type="date" id="end-time" className="form-date" placeholder="年/月/日"/>
							<a className="btn btn-blue">查询</a>
						</div>
					</div>*/}
                    <Spin spinning={this.state.loading} tip="加载列表中...">
					  <Detail detailList={this.state.detailList}/>
                    </Spin>
			    </div>
			    <div className="line"></div>
			    <Pages totalPage={this.state.totalPage} jump={this.jump.bind(this)} />

			</div>
			)
	}
}
export default PointDetail;